<template>
  <div class="device">
    <MyHeader title="设备管理"></MyHeader>
    <div class="flex flex-justify-between flex-align-center my-from">
      <el-form ref="form" :model="form" style="width:20%;">
        <div class="flex flex-justify-between flex-align-center">
          <div>
            <el-input v-model="form.search" placeholder="客户名称"></el-input>
          </div>
          <div>
            <el-button type="primary" @click="onSerch">搜索</el-button>
          </div>
        </div>
      </el-form>
      <span class="modify" @click="showModifyBox">
        <i class="iconfont">&#xe6ee;</i>
        修改
      </span>
    </div>
    <div class="my-table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @select="selectTableList"
        @select-all="selectTableAll"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="客户名称"></el-table-column>
        <el-table-column prop="device_name" label="设备名称"></el-table-column>
        <el-table-column prop="device_number" label="设备编号"></el-table-column>
        <el-table-column prop="service_day" label="服务天数" sortable></el-table-column>
        <el-table-column prop="service_price" label="服务费/天">
          <template slot="header" slot-scope="scope">
            服务费/天
            <el-tooltip
              class="item"
              effect="dark"
              content="机器服务费，按天收取，范围0-5元每天"
              placement="top-start"
            >
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="费率">
          <template slot="header" slot-scope="scope">
            费率
            <el-tooltip
              class="item"
              effect="dark"
              content="机器流水抽成，按笔抽取，范围0.3-0.8%"
              placement="top-start"
            >
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="registrationTime" label="注册时间"></el-table-column>
      </el-table>
      <div class="flex flex-justify-center my-pagination">
        <el-pagination background layout="prev, pager, next" :total="1000" :page-size="100"></el-pagination>
      </div>
    </div>
    <el-dialog title="修改费率" :visible.sync="isModify" width="23%" center :before-close="handleClose">
      <div class="flex flex-justify-center" style="color:red;margin-bottom:20px;">
        <i class="el-icon-warning"></i>
        <span>服务费范围0-5元每天，费率范围0.3-0.8%每笔，按天结算</span>
      </div>
      <div>
        <div class="flex flex-justify-center flex-align-center dialog-content">
          <span class="service-fee-input">服务费</span>
          <div class="flex flex-align-center flex-justify-around" style="width:50%;">
            <el-button icon="el-icon-minus" circle></el-button>
            <el-input v-model="ServiceFeeInput" placeholder></el-input>
            <el-button icon="el-icon-plus" circle></el-button>
          </div>
          <span style="width:10%;">元/天</span>
        </div>
        <div class="flex flex-justify-center flex-align-center dialog-content">
          <span class="rate-input">费&nbsp;&nbsp;&nbsp;率</span>
          <div class="flex flex-align-center flex-justify-around" style="width:50%;">
            <el-button icon="el-icon-minus" circle></el-button>
            <el-input v-model="Rateinput" placeholder></el-input>
            <el-button icon="el-icon-plus" circle></el-button>
          </div>
          <span style="width:10%;">%</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isModify = false">取 消</el-button>
        <el-button type="primary" @click="isModify = false">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MyHeader from "@/components/pageHeader/index";
export default {
  props: {},
  data() {
    return {
      ServiceFeeInput: "",
      Rateinput: "",
      form: {
        search: ""
      },
      tableData: [
        {
          name: "佲家智微科技有限公司1",
          device_name: "泡悠智能机",
          device_number: "00001",
          service_day: "20",
          service_price: "1",
          rate: "0.6%",
          registrationTime: "2019-08-02"
        },
        {
          name: "佲家智微科技有限公司1",
          device_name: "泡悠智能机",
          device_number: "00001",
          service_day: "20",
          service_price: "1",
          rate: "0.6%",
          registrationTime: "2019-08-02"
        },
        {
          name: "佲家智微科技有限公司1",
          device_name: "泡悠智能机",
          device_number: "00001",
          service_day: "20",
          service_price: "1",
          rate: "0.6%",
          registrationTime: "2019-08-02"
        },
        {
          name: "佲家智微科技有限公司1",
          device_name: "泡悠智能机",
          device_number: "00001",
          service_day: "20",
          service_price: "1",
          rate: "0.6%",
          registrationTime: "2019-08-02"
        },
        {
          name: "佲家智微科技有限公司1",
          device_name: "泡悠智能机",
          device_number: "00001",
          service_day: "20",
          service_price: "1",
          rate: "0.6%",
          registrationTime: "2019-08-02"
        }
      ],
      isModify: false
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    onSerch() {},
    showModifyBox() {
      this.isModify = !this.isModify;
    },
    selectTableList(selection, row) {
      console.log(selection, row);
      this.deleteTableLists = selection;
    },
    selectTableAll(selection) {
      console.log(selection);
      this.deleteTableLists = selection;
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex);
      row.index = rowIndex;
    },
    handleClose() {
      this.isModify = !this.isModify;
    }
  },
  components: {
    MyHeader
  }
};
</script>

<style scoped lang="less">
.my-from {
  margin-top: 10px;
  .modify {
    cursor: pointer;
  }
}
.device {
  padding: 20px 40px;
  background: #ddd;
}
.my-pagination {
  background: #fff;
  padding: 30px 0;
}
.my-table {
  margin-top: 25px;
}
.modifyBox {
  // width: 40%;
}
.dialog-content {
  margin-bottom: 15px;
  .service-fee-input,
  .rate-input {
    margin-right: 30px;
  }
}
</style>
<style scoped>
.dialog-content /deep/ .el-input {
  width: 40%;
}
</style>
